<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      font-weight: 700;
    }

    .nav {
      width: 300px;
      height: 300px;
      background-color: green;
      color: red;
      font-size: 50px;
    }
  </style>
</head>

<body>

  <!-- <img src="../../../../images/webapi/第一单元/1.webp" alt=""> -->

  <div class="box">我是div</div>

  <script>
    const divv = document.querySelector('.box')
    // divv.classList.add('nav')
    // divv.classList.remove('box')
    // divv.classList.toggle('nav')

    // divv.className = 'nav box'

    // const pic = document.querySelector('img')
    // // console.dir(pic)
    // pic.src = '../../../../images/webapi/第一单元/5.webp'

    // const li = document.querySelector('li')
    // // li.innerText = '推荐页面'
    // // li.innerText = '<strong>推荐页面</strong>'
    // li.innerHTML = '<strong>推荐页面</strong>'


    // const li = document.querySelectorAll('.nav li')
    // const li = document.querySelectorAll('li')
    // console.log(li)
    // for (let i = 0; i < li.length; i++) {
    //   console.log(li[i])
    //   li[i].style.color = 'red'
    // }

    // const name = '张三'
    // const age = 18
    // console.log(name + age)

    // const num = 1
    // num +=1
    // console.log(num)

    // const arr = [1, 2, 3]
    // arr.push(4)
    // console.log(arr)

    // const obj = {
    //   name: '张三',
    //   age: 18
    // }
    // // obj.song = '唱歌'
    // obj.age = 20
    // console.log(obj)


    // const arr = []
    // arr[0] = 1
    // console.log(arr)
    // arr.push(1)

    // // arr = ['张三', '李四']
    // console.log(arr)

    // const obj = {}
    // obj.name = '张三'


    // obj = {
    //   name: '李四'
    // }

    // console.log(obj)

  </script>
</body>

</html>